<div id="app">
    <span></span>
    <ul>
        <li></li>
        <li></li>
    </ul>
</div>
<script>
    const el = document.querySelector('#app')
    const vnode = createVNode(el)
    console.log(vnode)
    const dom = renderVNode(vnode)
    console.log(dom)

    /**
     * @param {HTMLElement} el
     */
    function createVNode(el) {
        const res = {}
        res.tag = el.tagName
        res.attrs = el.attributes
        res.children = [...el.children].map(createVNode)
        return res
    }

    function renderVNode(vnode) {
        // 如果是数字类型转化为字符串
        if (typeof vnode === 'number') {
            vnode = String(vnode)
        }
        // 字符串类型直接就是文本节点
        if (typeof vnode === 'string') {
            return document.createTextNode(vnode)
        }
        // 普通DOM
        const dom = document.createElement(vnode.tag)
        if (vnode.attrs) {
            // 遍历属性
            Object.keys(vnode.attrs).forEach((key) => {
                const value = vnode.attrs[key]
                dom.setAttribute(key, value)
            })
        }
        // 子数组进行递归操作
        vnode.children.forEach(child => dom.appendChild(renderVNode(child)))
        return dom
    }

    // {
    //     tag: 'DIV',
    //     children: [
    //         { tag: 'SPAN', children: [] },
    //         {
    //             tag: 'UL',
    //             children: [
    //                 { tag: 'LI', children: [] },
    //                 { tag: 'LI', children: [] }
    //             ]
    //         }
    //     ]
    // }
</script>
